import React, { useState } from "react";
import { ResultPage, Card, CalendarPickerView, Popup } from "antd-mobile";
import { Button } from "react-vant";
import { LoopOutline } from "antd-mobile-icons";
import { edit } from "../../store/Cittper";
import dayjs from "dayjs";
import stylse from "./home.module.css";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
function Index() {
  const navigate = useNavigate();
  const [start, setStart] = useState("北京"); //出发点
  const { date } = useSelector((state) => state.Cittper); //获取仓库日期
  const [end, setEnd] = useState("广州"); //目的地
  const dispatch = useDispatch();
  const [visible1, setVisible1] = useState(false);
  const handelcha = () => {
    navigate(`/list?start=${start}&end=${end}&date=${date}`);
  };
  return (
    <div>
      <ResultPage
        status=""
        title="火车票预订"
        description="便携购票,服务您的每一次出行"
        style={{ color: "#000" }}
      >
        <Card style={{ marginTop: 12 }}>
          <div className={stylse.home_div}>
            {start}
            <LoopOutline
              fontSize={26}
              style={{
                width: "30px",
                height: "30px",
                background: "#eee ",
                margin: "10px 0 0 0",
              }}
            />
            {end}
          </div>
          <div className={stylse.home_date} onClick={() => setVisible1(true)}>
            {date}
          </div>
          <Button
            type="primary"
            color="#000"
            block
            size="24px"
            onClick={() => handelcha()}
          >
            查询
          </Button>
        </Card>
        <Popup
          visible={visible1}
          showCloseButton
          onClose={() => {
            setVisible1(false);
          }}
        >
          <CalendarPickerView
            onChange={(val) => {
              dispatch(edit({ date: dayjs(val).format("YYYY-MM-DD") }));
              setVisible1(false);
            }}
          />
        </Popup>
      </ResultPage>
    </div>
  );
}

export default Index;
